<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
import {useUserStore} from "@/store/user";
import {reqLogin, reqGetUserInfo} from "@/api/user";
//防止重复点击登录
let isSend = ref(false)
//收集用户信息
let userinfo = reactive({
  username: '',
  password: ''
})
//定义表单收集规则
const rules = {
  "username": [
    {
      type: 'string',
      required: true,
      message: '邮箱不能为空',
      trigger: ['blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.email(value);
      },
      message: '邮箱格式不正确',
      // 触发器可以同时用blur和change
      trigger: ['blur'],
    }
  ],
  "password": [
    {
      type: 'string',
      required: true,
      message: '密码不能为空',
      trigger: ['blur']
    },
  ]
}
const userStore = useUserStore()
//获取表单实例
let formUser = ref()
//登录
const login = () => {
  //表单验证通过后发送请求
  formUser.value.validate().then(async () => {
    await reqLogin(userinfo).then(async res => {
      if (res.code == 200) {
        userStore.token = res.token
        await reqGetUserInfo(res.token).then((res) => {
          userStore.userInfo = {...res.data}
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }, 200)
      } else {
        uni.showToast({
          title: '密码或用户名不正确',
          icon: 'error'
        })
      }
    })
  })

}
onMounted(() => {
//给表单设置收集规则
  formUser.value.setRules(rules)
})

//去注册页面
const toRegister = () => {
  uni.reLaunch({
    url: '/pages/register/register'
  })
}
</script>
<template>
  <view class="bar"></view>

  <view class="container">
    <image style="margin-top: 30rpx" src="/static/images/login/Image.png" mode="aspectFit"/>

    <h2 style="text-align: center;margin-top: 20rpx">登录</h2>
    <view class="from">

      <u--form
          labelPosition="left"
          :model="userinfo"
          ref="formUser"
      >
        <u-form-item
            prop="username"
            ref="item1"
        >

          <u--input
              class="from-item"
              placeholder="请输入邮箱"
              border="surround"
              shape="circle"
              prefixIcon="account"
              v-model="userinfo.username"
              type="text"
          ></u--input>

        </u-form-item>

        <u-form-item
            prop="password"
            ref="item1"
        >
          <u--input
              class="from-item"
              placeholder="请输入密码"
              :password="true"
              border="surround"
              prefixIcon="lock"
              v-model="userinfo.password"
              shape="circle"
              type="password"
          ></u--input>

        </u-form-item>

        <u-form-item>
          <up-button class="from-item" color="#FF9E29" :disabled="isSend" @click="login()" shape="circle">登录
          </up-button>
        </u-form-item>
      </u--form>
    </view>

    <view style="display: flex;justify-content: center;">
      还没有账号？&nbsp;&nbsp;
      <text style="color: #FF9E29" @click="toRegister()">立即注册</text>
    </view>

  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(238, 238, 238, 0.26);

  .title {
    background-color: #4cd964;
    width: 35vw;
  }

  image {
    width: 100%;
  }

  .from {
    margin: 30rpx auto;
    width: 80vw;

    .from-item {
      height: 80rpx;
    }
  }


}
</style>
